import type { CheckboxProps } from "antd"
import { Checkbox } from "antd"
import { FC, useState } from "react"
import styled from "styled-components"

import { IGameVenue } from "@/api/report/types"
import { SFlex, SFormItem, SModal } from "@/components/common"
import { useLocale } from "@/locales"
const CheckboxGroup = Checkbox.Group

const StyleCheckboxGroup = styled(CheckboxGroup)`
	.ant-checkbox-wrapper {
		flex-basis: 20%;
		flex-grow: 1;
		max-width: 24%;
	}
`

interface GameSelectProps {
	options: IGameVenue[]
	checkedList: number[]
	setCheckedList: (value: number[]) => void
}

export const isContainGame = (value: number, venue: IGameVenue) => venue.gameTypeList.filter(g => g.gameId === value).length > 0
export const getAllGameNames = (venues: IGameVenue[]) =>
	venues.reduce((acc, cur) => [...acc, ...cur.gameTypeList.map(g => g.gameId)], [] as number[])

export const unique = (array: number[]) => [...new Set(array)]

export const GameSelect: FC<GameSelectProps> = ({ options, checkedList, setCheckedList }) => {
	const [isOpenModal, setIsOpenModal] = useState<boolean>(false)
	const { newFormat, formatMessage } = useLocale()

	const checkAll = getAllGameNames(options).length === checkedList.length

	const onChange = (list: number[], full: number[]) => {
		const emptyGroup = checkedList.filter(c => !full.includes(c))
		setCheckedList(unique([...emptyGroup, ...list]))
	}

	const onCheckAllChange: CheckboxProps["onChange"] = e => {
		setCheckedList(e.target.checked ? getAllGameNames(options) : [])
	}

	const onVenueCheck = (venueName: string, isChecked: boolean) => {
		const venueGameList = (options.find(o => o.venueName === venueName)?.gameTypeList || []).map(g => g.gameId)

		setCheckedList(isChecked ? unique([...checkedList, ...venueGameList]) : checkedList.filter(c => !venueGameList.includes(c)))
	}

	const onCancel = () => {
		setIsOpenModal(false)
	}
	const openModal = () => {
		setIsOpenModal(true)
		return false
	}

	return (
		<SFormItem name="gameTypeIds" valuePropName="checked">
			<Checkbox onChange={onCheckAllChange} checked={checkAll}>
				{formatMessage({ id: "report.select_all" })}
			</Checkbox>
			<a onClick={openModal}>{newFormat({ id: "report.game_choice" })}</a>
			<SModal
				open={isOpenModal}
				title={`${formatMessage({ id: "report.game_choice" })}`}
				footer={[]}
				closeIcon={null}
				onCancel={onCancel}
				width={800}
				bodyStyle={{ overflowY: "auto", maxHeight: "500px" }}
			>
				<SFlex vertical gap={20}>
					{options.map(o => (
						<div key={o.venueName}>
							<SFlex gap={20}>
								<div>{o.venueName}</div>
								<Checkbox
									onChange={e => onVenueCheck(o.venueName, e.target.checked)}
									checked={o.gameTypeList.map(g => g.gameId).every(r => checkedList.includes(r))}
								>
									{formatMessage({ id: "report.select_all" })}
								</Checkbox>
							</SFlex>
							<SFlex vertical gap={20}>
								<div></div>
								<StyleCheckboxGroup
									options={o.gameTypeList.map(g => ({ label: g.gameName, value: g.gameId }))}
									value={checkedList.filter(g => isContainGame(g, o))}
									onChange={list => {
										onChange(
											list as number[],
											o.gameTypeList.map(g => g.gameId)
										)
									}}
								/>
							</SFlex>
						</div>
					))}
				</SFlex>
			</SModal>
		</SFormItem>
	)
}
